<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="./sass/login.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="icon" href="./favicon.ico">
    <script src="https://at.alicdn.com/t/font_2708812_bm8m0c7ed8i.js"></script>
</head>

<body>
    <div class="login">
        <img src="./images/login1.jpg" alt="">
        <div class="login_list">
            <div class="nav">
                <div class="logo">
                    <img src="./images/logo-mi2.png" alt="">
                    <h1>小米账号</h1>
                </div>
                <div class="nav_menu">
                    <a href="">用户隐私</a>
                    <a href="">隐私政策</a>
                    <a href="">帮助中心</a>
                    <a href="" class="sep">中文(简体)</a>
                </div>
            </div>
            <div class="layout">

                <div class="lay_list">
                    <a href="" class="login_s">登录</a>
                    <a href="./register.html">注册</a>
                    <div class="login_in">
                        <input type="text" class="username" placeholder="用户名">
                        <span class="username_span"></span>
                        <input type="password" class="password" placeholder="密码">
                        <span class="password_span"></span>

                        <input type="checkbox" class="xz"><span>已阅读并同意小米帐号 用户协议 和 隐私政策</span>
                        <button class="btn">登录</button>
                        <a href="">忘记密码?</a><a href="" class="tel">手机号登录</a>

                        <p>其他方式登录</p>
                        <div class="qita">
                            <a href=""><svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-qq"></use>
                                </svg></a>
                            <a href=""><svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-weibo"></use>
                                </svg></a>
                            <a href=""><svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-zhifubao"></use>
                                </svg></a>
                            <a href=""><svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-weixin"></use>
                                </svg></a>
                        </div>

                    </div>

                </div>
            </div>
        </div>
    </div>
</body>
<script src="./js/tool_ajax.js"></script>
<script src="./js/api.js"></script>
<script>
    $('.btn').onclick = async function () {
        const username = $('.username').value;
        const password = $('.password').value

        if (username && password) {

            const res = await login({
                username,
                password
            })
            console.log(res);

            const {
                status,
                msg
            } = res;

            if ($('.xz').checked) {

                if (status) {
                    alert("登录成功")
                    localStorage.setItem('login_user', username);
                    location.href = './mi.html';
                } else {
                    $('.username_span').innerHTML = "用户不存在 请注册";
                    $('.username_span').style.color = "red";
                    $('.username_span').style.fontSize = "14px";
                    alert("用户不存在,跳转注册页面")
                    location.href = "./register.html"
                }
            } else {
                alert("请勾选协议!")
            }

        }
    }
</script>

</html>